<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/sm.css">
    <link rel="stylesheet" href="css/sm-extend.css">
</head>
<body>

<div class="page-group">

    <div id="page1" class="page page-current">
<!---------------------------------------------------------->


                <header class="bar bar-nav">
                    <a class="icon icon-me pull-left open-panel"></a>
                    <h1 class="title">标题</h1>
                </header>

                <!-- 工具栏 -->
                <nav class="bar bar-tab">
                    <a class="tab-item external active" href="#">
                        <span class="icon icon-home"></span>
                        <span class="tab-label">首页</span>
                    </a>
                    <a class="tab-item external" href="#">
                        <span class="icon icon-star"></span>
                        <span class="tab-label">收藏</span>
                    </a>
                    <a class="tab-item external" href="#">
                        <span class="icon icon-settings"></span>
                        <span class="tab-label">设置</span>
                    </a>
                </nav>

                <!-- 这里是页面内容区 -->
                <div class="content">
                    <div class="content-block">




                        <div class="content-padded">
                            <p>我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白</p>
                        </div>





                        这里是content</div>
                </div>
            </div>

            <!-- 其他的单个page内联页（如果有） -->
            <div class="page">...</div>
        </div>

        <!-- popup, panel 等放在这里 -->
        <div class="panel-overlay"></div>
        <!-- Left Panel with Reveal effect -->
        <div class="panel panel-left panel-reveal">
            <div class="content-block">
                <p>这是一个侧栏</p>
                <p></p>
                <!-- Click on link with "close-panel" class will close panel -->
                <p><a href="#" class="close-panel">关闭</a></p>


        <!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
        <script>$.init()</script>



<!--------------------------------------------------------------->
    </div>

</div>


</body>
<script src="scripts/zepto.js"></script>
<script src="scripts/sm.js"></script>
<script src="scripts/sm-extend.js"></script>

</html>